<template>
  <div>
    <el-form ref="form" :model="form" :v-loading="loading" :rules="rules" label-width="100px">
      <el-form-item label="课程名称" prop="coursename">
        <el-input v-model="form.coursename" placeholder="请输入课件名称"/>
      </el-form-item>

     <!-- <el-form-item label="讲师名称" prop="lecturer">
        <el-input v-model="form.lecturer" placeholder="请输入讲师名称"/>
      </el-form-item>-->

      <el-form-item label="封面路径" prop="coverpath">
        <UploadImage @change="imageChange" :path="form.coverpath"></UploadImage>
      </el-form-item>


      <el-row>
        <el-col :span="5">
          <el-form-item label="现价" prop="amount">
            <el-input-number v-model="form.amount" :min="0" :max="999999" :precision="2" :step="1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="原价" prop="costamount">
            <el-input-number v-model="form.costamount" :min="0" :max="999999" :precision="2"
                             :step="1"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="5">
          <el-form-item label="播放次数" prop="playnumber">
            <el-input-number v-model="form.playnumber" :step="1" :max="999999"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="5">

          <el-form-item label="是否免费" prop="free">
            <el-radio-group v-model="form.free" size="small">
              <el-radio label="0" border>是</el-radio>
              <el-radio label="1" border>否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>



      <el-form-item label="标签" prop="labels">
        <el-checkbox-group v-model="form.labels">
          <el-checkbox v-for="item in courseLabels" :label="item.id" border>{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="课程介绍" prop="desc">
        <el-input v-model="form.describe" type="textarea" :rows="5" placeholder="请输入课程介绍"/>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="text-align: center">
      <el-button type="primary" :disabled="addLoading" @click.native.prevent="submitForm">
        <span v-if="!addLoading">提 交</span>
        <span v-else>提 交 中...</span>
      </el-button>
      <!--<el-button @click="cancel">取 消</el-button>-->
    </div>
  </div>
</template>

<script>
  import UploadImage from '@/components/UploadImage';
  import {addCourse, editCourse, courseType, courseLabel} from "@/api/college/course";

  export default {
    components: {UploadImage},
    props: {
      row: {
        type: Object,
        require: false
      }
    },
    data() {
      return {
        loading: false,
        addLoading: false,
        form: {
          free: "0",
          amount: 0,
          costamount: 0,
          coursenum: 0,
          freecoursenum: 0,
          coursename: '',
          coverpath: '',
          typeId: 2,
          playnumber:0,
          lecturer:'',
          labels: []
        },
        courseTypes: undefined,
        courseLabels: undefined,
        rules: {
          /*lecturer: [
            {required: true, message: '请输入讲师名称', trigger: 'blur'},
            {min: 2, max: 50, message: '请输入2-50位字符', trigger: 'blur'}
          ],*/
          coursename: [
            {required: true, message: '请输入课程名称', trigger: 'blur'},
            {min: 2, max: 20, message: '请输入2-28位字符', trigger: 'blur'}
          ],
          coverpath: [
            {required: true, message: '封面图片不能为空'}
          ],
          position: [
            {required: true, message: '请输入头衔', trigger: 'blur'},
            {min: 2, max: 10, message: '长度2-10个字符', trigger: 'blur'}
          ],
          labels: [
            {type: 'array', required: true, message: '请至少选择一个标签', trigger: 'change'}
          ],
          describe:[
            {max: 500, message: '长度最长为100个字符', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.getMap();
      if (this.row) {
        this.form = {
          id: this.row.id,
          lecturer:this.row.lecturer,
          free: this.row.free + "",
          amount: this.row.amount,
          costamount: this.row.costamount,
          coursenum: this.row.coursenum,
          freecoursenum: this.row.freecoursenum,
          coursename: this.row.coursename,
          coverpath: this.row.coverpath,
          typeId: this.row.typeId,
          describe:this.row.describe,
          playnumber:this.row.playnumber,
          labels: []
        };
        courseLabel(this.row.id).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            this.form.labels.push( res.data[i]);
          }
        });

      }
    },
    methods: {
      getMap() {
        this.loading = true;
        courseType().then(response => {
          this.courseLabels = response.data.courseLabels;
          this.courseTypes = response.data.courseTypes;
          this.loading = false;
        });
      },
      submitForm() {
        let _this = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.form);
            if (this.form.id) {
              editCourse(this.form).then(response => {
                this.msgSuccess("编辑成功");
                this.addLoading = false;
                this.$emit('goBack', 'editLecturer');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            } else {
              this.addLoading = true;
              addCourse(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.addLoading = false;
                this.$emit('goBack', 'addLecturer');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            }
          }
        });
      },
      imageChange(message) {
        this.$set(this.form, 'coverpath', message);
        this.$refs.form.validateField('coverpath');
      },
    }
  }
</script>

<style scoped>

</style>
